<!DOCTYPE html>
<html>
<head>

  <title>SpeedTest</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <link rel="icon" type="image/png" href="iui/iui-favicon.png">
  <link rel="apple-touch-icon" href="iui/iui-logo-touch-icon.png" />
  <link rel="stylesheet" href="iui/iui.css" type="text/css" />
  <link rel="stylesheet" title="Default" href="iui/t/default/default-theme.css"  type="text/css"/>
  <link rel="stylesheet" href="css/iui-panel-list.css" type="text/css" />
  <style type="text/css">
.panel p.normalText { text-align: left;  padding: 0 10px 0 10px; }
  </style>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-8634743-10'], ['_trackPageview']);
  </script>
  <script type="text/javascript">
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
  <script type="text/javascript" src="tinytst1.js?v8"></script>

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function success(position) {
  var s = document.querySelector('#status');
  
  var latitude = document.getElementById('latitude');
  var longitude = document.getElementById('longitude');
  
  if (s.className == 'success') {
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back    
    return;
  }
  
  s.innerHTML = "found you!";
  s.className = 'success';

  latitude.value = position.coords.latitude;
  longitude.value = position.coords.longitude;
  
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '240px';
  mapcanvas.style.width = '320px';
    
  document.querySelector('article').appendChild(mapcanvas);
  
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  
  var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  
  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script>  
 
</head>

<?php

$platform = $_GET['platform'];

switch ($platform) {
    case 0:
        echo ('<body onLoad="tst_start(0);">');
        break;
    case 1:
        echo ('<body onLoad="tst_start(1);">');
        break;
    case 2:
        echo ('<body onLoad="tst_start(2);">');
        break;
    case 3:
        echo ('<body onLoad="big_tst_start(3);">');
        break;
}
?>
    <div class="toolbar">
        <h1 id="pageTitle">SpeedTest</h1>
        <a style="display: inline;" id="backButton" class="button" href="index.php">Home</a>
    </div>

<div id="home" class="panel" selected="true">	
<article>
	<p>Finding your location: <span id="status">checking...</span></p>
</article>	
</div>
    
    <!--<form id="settings" title="Settings" class="panel" selected="true" action="index.php" method="POST">-->
    <form name="form1" class="panel" selected="true" onsubmit="setCookie();" action="index.php" method="POST">
        <fieldset>
            <div class="row">
                <label>Name</label>
                <input id="name" type="text" name="name" value=""/>
            </div>
            <div class="row">
                <label>Provider</label>
                <input id="provider" type="text" name="provider" value=""/>
            </div>
            <div class="row">
                <label>Latitude</label>
                <input id="latitude" type="text" name="latitude" value="locating"/>
            </div>
            <div class="row">
                <label>Longitude</label>
                <input id="longitude" type="text" name="longitude" value="locating"/>
            </div>
            <div class="row">
                <label>Speed</label>
                <input id="kbps" type="text" name="speed" value=""/>
            </div>	
			<div class="row">
                <label>Timestamp</label>
				<?php
				$datum = date("d.m.Y");
				$uhrzeit = date("G:i:s");
				echo '<input name="timestamp" type="text" size="30" maxlength="40" value="'.$datum.' - '.$uhrzeit.'" />';
				?>	 				
            </div>	
        </fieldset>
		<a class="whiteButton" href="javascript:validateAndSend();" type="submit">Submit</a>
    </form>
</body>
</html>
